<template>
<view class="chongzhi">
	<view class="top-box">		
		<view style="height: 1upx; width: 150upx; background: #cdcdcd;"></view>
		<view style="flex-shrink: 0;">请选择充值金额</view>		
		<view style="height: 1upx; width: 150upx; background: #cdcdcd;"></view>
	</view>
	<view class="jiner-box">
		<view class="jiner-item" v-for="item in list" :key="item" :class="{ active: sele==item }" @click="changeSele(item)">{{item}}元</view>
	</view>
	<image src="../../static/wxPay.png" style="width: 690upx; height: 80upx; margin: 120upx auto 0; display: block;"></image>
	<view class="jiner-button" @click="chongzhi">点击充值</view>
	<view style="width: 100%; height: 90upx; line-height: 90upx; text-align: center; margin-top: 20upx; font-size: 30upx;">		
		<checkbox-group @change="changeCheck" style="display: inline-block;">
			<checkbox value="check" :checked="true"/>
		</checkbox-group>
		<text>点击支付即同意</text>
		<text @click="weituoshu" style="marginsleft: 10upx; color: #ef7738;">《充值说明》</text>
	</view>
	<view style="height: 100upx;"></view>
</view>
</template>

<script>
import { HTTP } from '../../http.js';
let http = new HTTP;
export default {
	data() {
		return {
			sele: 0,
			list: [],
			check: true
		}
	},
	onLoad() {
		http.request({
			url: `borrow/rechargeNum?a=a`,
			method: 'get',
			success: (res)=>{
				console.log(res,'可充值金额');
				let arrStr=res.dataList;
				let arr=arrStr.split(',');
				this.list=arr;
				this.sele=arr[0];
			}
		});
	},
	methods: {
		changeCheck(e) {
			if(e.type=="change"&&e.detail.value.length>0){
				this.check=true;
			}else{
				this.check=false;
			}
		},
		weituoshu() {
			uni.navigateTo({ url: 'shuoming' });
		},
		changeSele(item){
			this.sele=item;
		},
		chongzhi(){		
			if ( !this.check ) { 
				uni.showModal({
					title: '提示',
					content: '请先勾选确认“充值说明”！',
					success: (res) => {}
				});
				return ; 
			}
			let user = uni.getStorageSync('user');
			uni.showLoading({ title: '加载中' });
			http.request({
				url: `borrow/recharge?openId=${user.wxOpenId}&money=${this.sele}`,
				method: 'post',
				success: (res)=>{
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.dataList.timeStamp,
						nonceStr: res.dataList.nonceStr,
						package: res.dataList.package,
						signType: 'MD5',
						paySign: res.dataList.paySign,
						success: (res) =>  {						
							uni.hideLoading();
							uni.navigateBack({ delta: 1, success: ()=>uni.showToast({ icon: 'none', title: '支付成功！', duration: 2000 }) });						
						},
						fail: (err) => {	
							uni.hideLoading();						
							uni.showToast({ icon: 'none', title: '支付失败！', duration: 2000 });		
						}
					});				
				}
			});
		},
		weixinPay(){				
			uni.login({
				success: (e) => {
					uni.request({
						url: `https://unidemo.dcloud.net.cn/payment/wx/mp?code=${e.code}&amount=${this.price}`,
						success: (res) => {
							console.log(res);
							return ;
							if(res.statusCode !== 200){
								uni.showModal({ content: "支付失败，请重试！", showCancel: false });
								return ;
							}
							if(res.data.ret === 0){
								let paymentData = res.data.payment;
								uni.requestPayment({
									provider: 'wxpay',
									orderInfo: '',
									timeStamp: paymentData.timeStamp,
									package: paymentData.package,
									nonceStr: paymentData.nonceStr,
									paySign: paymentData.paySign,
									signType: 'MD5',
									success: (res) => {
										uni.showToast({ title: "感谢您的赞助!" });
									},
									fail: (res) => {
										uni.showModal({ content: "支付失败,原因为: " + res.errMsg, showCancel: false });
									}
								})
							}else{
								uni.showModal({ content: res.data.desc, showCancel: false });
							}
						},
						fail: (e) => {
							uni.showModal({ content: "支付失败,原因为: " + e.errMsg, showCancel: false });
						}
					})
				},
				fail: (e) => {
					uni.showModal({ content: "支付失败,原因为: " + e.errMsg, showCancel: false });
				}
			})
		}
	}
}
</script>

<style>
.chongzhi {
	height: 100vh;
	position: relative;
	background: #f7f7f7;
	overflow: auto;
}
.chongzhi .top-box{
	width: 70%;
	margin: 50upx auto;
	height: 50upx;
	font-size: 30upx;
	color: #cdcdcd;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.chongzhi .jiner-box{
	height: 350upx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;

}
.chongzhi .jiner-item{
	width: 210upx;
	height: 120upx;
	line-height: 120upx;
	background-color: #ffffff;
	border-radius: 30upx;
	text-align: center;
	color: #000;
	font-weight: bold;
}
.chongzhi .active{
	color: #ffffff;
	background-image: linear-gradient(209deg, #ef6e2a 0%, #ed7739 50%, #ea7f48 100%), linear-gradient(220deg, #f48f59 0%, #e97c42 100%);
	box-shadow: 0upx 3upx 17upx 1upx rgba(239, 146, 98, 0.33);
}

.chongzhi .jiner-button{
	width: 400upx;
	height: 110upx;
	line-height: 110upx;
	margin: 150upx auto 0;
	text-align: center;
	background-image: linear-gradient(209deg, #ef6e2a 0%, #ed7739 50%, #ea7f48 100%), linear-gradient(#000000, #000000);
	border-radius: 55upx;
	color: #fff;
	box-shadow: 0upx 3upx 17upx 1upx rgba(239, 146, 98, 0.33);
}
</style>
